<template>
	<view class="maintenance">
		<user-head></user-head>
		<view class="container">
			<view class="title">
				<view class="caption-box">
					<text class="caption">设备维修上报</text>
					<image class="service" src='/static/imgs/service.png'></image>
				</view>
				<text class="subhead">EQUIPMENT MAINTENANCE REPORT</text>
				<view class="title-square"></view>
			</view>
			<view class="input sel">
				<text class="top">设备故障状态</text>
				<view class="sel-box">
					<view :class="['btn', {'ac': deviceStatus == 0}]" @tap="tapStatus(0)">故障未解除</view>
					<view :class="['btn', {'ac': deviceStatus == 1}]" @tap="tapStatus(1)">故障已解除</view>
				</view>
			</view>
			<view class="input">
				<input type="text" v-model="code" placeholder="填写故障编号代码" placeholder-class="place-color">
			</view>
			<view class="input">
				<textarea v-model="desc" placeholder="填写维修记录详情" placeholder-class="place-color" />
				</view>
			<view :class="['commit', {'ac': isFinsh}]" @tap="commit">
				<image v-show="!isFinsh" class="bg" src="../../static/imgs/btn.png"></image>
				<image v-show="isFinsh" class="bg" src="../../static/imgs/btn-ac.png" @tap="commit"></image>
				<text class="text">提交上报</text>
			</view>
		</view>
	</view>
</template>

<script>
	import UserHead from '@/components/user-head/user-head'
	import {submitReport} from '@/api/config'
	
	export default {
		data() {
			return {
				code: '', // 故障代码
				desc: '', // 详情
				deviceStatus: 0 // 设备状态
			};
		},
		components: {
			UserHead
		},
		computed: {
			// 是否填写完成
			isFinsh() {
				let res = false
				if (this.code && this.desc) {
					res = true
				}
				return res
			}
		},
		methods: {
			// 初始化
			init() {
				this.code = ''
				this.desc = ''
			},
			// 提交
			async commit() {
				if (this.$isEmpty(this.code, '故障编号代码不能为空')) return
				if (this.$isEmpty(this.desc, '维修记录详情不能为空')) return
				// 登录检测
				if (!this.isLogin()) return
				const params = {
					number: this.code,
					remark: this.desc,
					status: this.deviceStatus+1
				}
				const [err, res] = await submitReport(params)
				if (res) {
					this.$toast('提交成功！')
					setTimeout(() => {
						this.init()
					}, 500)
				}
			},
			// 登录检测
			isLogin() {
				let res = true
				if (!this.$storage.get('token')) {
					this.$open('/pages/login-wechat/login-wechat')
					res = false
				}
				return res
			},
			// 切换状态
			tapStatus(index) {
				this.deviceStatus = index
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config';
	@import '@/static/scss/mixin';

	page {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.maintenance {
			@include square();
			.container{
				@include square(100%, linear-gradient(180deg, $bg-c, $bg-d));
				@include flex-col(flex-start);
				margin-top: $head-height;
				.title {
					@include box-w($safe-width);
					margin-top: 100rpx;
					margin-bottom:60rpx;
					.caption-box{
						@include flex-row(flex-start);
						.caption{
							@include font-set($font-f, $color-a, 500);
						}
						.service{
							position: relative;
							top:5rpx;
							@include circle(64rpx);
							margin-left:20rpx;
						}
					}
					.subhead{
						@include font-set($font-a, $color-b);
						opacity: .4;
					}
					.title-square{
						@include box(60rpx, 8rpx, $bg-a);
						margin-top:20rpx;
					}
				}
				.input{
					@include box-w($safe-width);
					@include flex-row();
					padding:40rpx 0;
					~ .input {
						border-top:2rpx solid rgba(255, 255, 255, .15);
					}
					@include placeholder($color-a);
					.top{
						@include font-set($font-c, $color-a);
					}
					&.sel{
						justify-content: space-between;
					}
					.sel-box{
						@include box(384rpx, 72rpx, $bg-p);
						@include flex-row();
						.btn {
							@include box(210rpx, 64rpx);
							@include flex-row();
							@include font-set($font-i, $color-m);
							&.ac{
								background-color: $bg-a;
								@include font-set($font-i, $color-l);
							}
						}
					}
					&>input,textarea{
						@include box(100%, 44rpx);
						@include font-set($font-c, $color-a);
						.place-color{
							color:$color-g;
						}
					}
					&>textarea{
						@include box(100%, 288rpx);
					}
				}
				.commit{
					margin-top:60rpx;
					position: relative;
					@include box($safe-width, 136rpx);
					@include font-set($font-c, $color-b, 500);
					text-align: center;
					line-height: 100rpx;
					&.ac{
						color: $color-f;
						.text{
							opacity: 1;
						}
					}
					.text{
						@include top(0);
						opacity: .5;
					}
					.bg{
						@include cross(absolute);
						@include square(100%);
					}
				}
			}
		}
	}
</style>
